import React, {useMemo} from 'react';
import { observer } from "mobx-react-lite";

import Earth3dVis, {type Earth3dVisProps} from "@/components/app/earth3dVis";
import { SimulationStore } from "./model";
import { Ctx } from "./ctx";
import { NetworkToolBar } from "./widgets";

// 基础图层列表
const baseLayers: Earth3dVisProps["baseLayers"] = [
    {
        label: "",
        groupLayer: [
            {
                amap:{
                    style:'img',     // 卫星图
                    crs:"WGS84",
                    maximumLevel: 16,
                }
            },
            {
                amap:{
                    style:'cva',        // 路网图
                    crs:"WGS84",
                    maximumLevel: 18,
                }
            }
        ]
    }
];

// const cameraFlyToPosition: Earth3dVisProps["cameraFlyToPosition"] = {
//     lng: 106.35,
//     lat: 34.21,
//     alt: 6800000.0,
//     heading: 0,      // 相机的朝向
//     pitch: -90,      // 相机的俯仰角
//     roll: -5,        // 相机的滚转角
//     duration: 3,     // 动画持续时间, 单位是秒
// };

const cameraFlyToPosition: Earth3dVisProps["cameraFlyToPosition"] = {
    alt: 6576638.7572087515,
    heading: 355.4607517288918,
    lat: 17.89869733132441,
    lng: 107.93121288959384,
    pitch: -75.42102898826509,
    roll: 0.45895077512819044,
};

const lookAtPosition: Earth3dVisProps["lookAtPosition"] = {
    center:{
        lng: 106.35,
        lat: 34.21,
    },
    heading: 0,      // 相机的朝向
    pitch: -90,      // 相机的俯仰角
    range: 6800000.0,        // 相机的滚转角
};


const NetworkSimulation: React.FC = () => {
    const { simulationStore } = useNetworkSimulation();
    const { loading, onMapDidMount } = simulationStore;

    return <Earth3dVis
        baseLayers={baseLayers}
        cameraFlyToPosition={cameraFlyToPosition}
        // lookAtPosition={lookAtPosition}
        onMapDidMount={onMapDidMount}
    >
        {!loading && <Ctx.Provider value={{simulationStore}}>
            <NetworkToolBar />
        </Ctx.Provider>}
    </Earth3dVis>
}

export default observer(NetworkSimulation);

const useNetworkSimulation = () => {
    const simulationStore = useMemo(() => new SimulationStore(), [])

    return {simulationStore}
}